<template>
  <div class="category">
    <h3>{{ title }}分类</h3>
    <slot>
      <ul>
        <li v-for="item in listData" :key="item" v-text="item"></li>
      </ul>
    </slot>
  </div>
</template>

<script>
export default {
  props: ["title", "listData"],
};
</script>

<style scoped lang="scss">
.category {
  background: skyblue;
  width: 200px;
  min-height: 300px;
  padding: 1rem;

  & h3 {
    text-align: center;
    background: orange;
  }

  & img,
  & video {
    width: 100%;
    object-fit: cover;
  }
}
</style>
